<template>
  <div class="flex align-center color-picker">
    <span v-for="(color, index) in preDefineColors" :key="index" class="pre-define"
          :style="{backgroundColor: color}"
          @click="onChange(color)"
    ></span>
    <el-color-picker @change="onChange"></el-color-picker>
  </div>
</template>

<script>
export default {
  name: 'color-picker',
  props: {
    showPreDefineColors: {
      type: Boolean,
      default: true
    },
    preDefineColors: {
      type: Array,
      default () {
        return [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
        ]
      }
    }
  },
  methods: {
    onChange (color) {
      this.$emit('change', color)
    }
  }
}
</script>

<style lang="scss" scoped>
  .pre-define {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
</style>
